<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    v-model 使用在组件上的展开形式

      Vue2:
          v-model="msg"

          :value="msg"
          @input="msg = $event"

      Vue3:

          v-model="msg"

          :modelValue="msg"
          @update:modelValue="msg = $event"

    如何让自己编写的组件支持 v-model 的语法，来实现 父子组件 数据的双向绑定？？？
          要按照上面描述的展开形式来编写我们的组件

    
    实现一个如下的组件

        <BaseButton v-model="count" />
   -->

    <div id="app"></div>

    <script src="../lib/vue2.js"></script>
    <script>
      Vue.component("BaseButton", {
        props: ["value"],

        template: `
          <button @click="onClick">{{ value }}</button>
        `,

        methods: {
          onClick() {
            this.$emit("input", this.value - 1);
          },
        },
      });

      const app = new Vue({
        template: `
          <div>
            <p>COUNT: {{ count }}</p>

            <hr />

            <BaseButton :value="count" @input="count = $event" />

            <hr />

            <BaseButton v-model="countTwo" />
          </div>
        `,

        data() {
          return {
            count: 1,
            countTwo: 10,
          };
        },
      });

      app.$mount("#app");
    </script>
  </body>
</html>
